<!--测评_评价等次信息表-->
<template>
  <div class="mod-config">
    <basic-container>
      <div class="boxsty">
        <div class="flex justifyContentSpaceBetween">
          <div class="tabletext">评价等次管理</div>
          <div class="tablelink">

            <el-link icon="el-icon-plus" type="primary" v-if="permissions.ceping_djxxb_cepingdjxxb_add" @click="djxx_addOrUpdateHandle($event,null)" :underline="false">新增等次</el-link>
            <!-- <el-input  style="width:400px; margin-right:20px;" placeholder="评价等次名称" v-model="search.djName"></el-input> -->
          </div>
        </div>
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList" class="form-inline">
          <el-form-item label="评价等次名称">
            <el-input placeholder="输入评价等次名称" style="width:300px" v-model="dataForm.djName"></el-input>
          </el-form-item>
          <el-form-item label="等次状态">
            <el-select :clearable="true" v-model="dataForm.djZt" placeholder="请选择状态" style="margin-left:10px" class="xiaLa">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-button icon="el-icon-search" type="primary" class="marginLeft" @click="getDataList(1)">检索</el-button>
          </el-form-item>
        </el-form>
        <div style="height:60vh; overflow-y: auto;">
          <el-collapse v-model="activeName" v-for="(item,index)  in dataList" @change="querySubRuleHandler(item.id,index)" accordion :key="index">
            <el-collapse-item>
              <template slot="title">
                <div class="collapseBox">
                  <div class="flex alignItemsCenter">
                    <span class="numTip"> {{ index + 1 }}</span><span class="titleBox" style="margin-left:10px;"><span>{{ item.djName }}</span></span>
                  </div>
                  <div class="collapseSummary flex justifyContentSpaceBetween">
                    <div>
                      <div class="mb5">创建时间：{{ $moment(item.createTime).format("YYYY-MM-DD") }}</div>
                      <div class="mb5">创建部门：{{ item.createDeptName }}</div>
                      <div>项目状态：<span :class="Zt(item.djZt)">{{ item.djZt == 1 ? "显示" : "隐藏" }}</span></div>
                    </div>
                    <div>
                      <el-button v-if="permissions.ceping_djxxb_cepingdjxxb_add && item.createDeptId === userInfo.deptId" type="primary" plain @click="showOrDisplayHandler( $event,item.id,item.djZt)">
                        {{ item.djZt == '0' ? '显示' : '隐藏' }}
                      </el-button>
                      <el-button type="primary" plain v-if="permissions.ceping_djxxb_cepingdjxxb_add" @click="copyRuleHandler($event,item.id)">复用</el-button>
                      <el-button type="primary" v-if="permissions.ceping_djxxb_cepingdjxxb_add && item.createDeptId === userInfo.deptId" plain @click="djmx_addHandle( $event,item.id,null,index)">
                        新增等次明细
                      </el-button>
                      <el-button type="primary" v-if="permissions.ceping_djxxb_cepingdjxxb_edit && item.createDeptId === userInfo.deptId" plain @click="djxx_addOrUpdateHandle($event,item.id)">编辑等次</el-button>
                      <el-button type="danger" v-if="permissions.ceping_djxxb_cepingdjxxb_del && item.createDeptId === userInfo.deptId" plain @click="djxx_deleteHandle($event,item.id)">删除等次</el-button>
                    </div>
                  </div>
                </div>
              </template>
              <div class="avue-crud">
                <el-table :data="item.subList" style="width: 100%;" stripe>
                  <el-table-column label="等次名称" prop="dcName"></el-table-column>
                  <el-table-column label="等次分值" prop="dcFz"></el-table-column>
                  <!-- <el-table-column label="等次结果起" prop="dcJgq"></el-table-column> -->
                  <!-- <el-table-column label="等次结果止" prop="dcJgz"></el-table-column> -->
                  <el-table-column label="等次排序" prop="dcSort"></el-table-column>
                  <el-table-column label="占比(%)" prop="dcZb"></el-table-column>
                  <el-table-column label="操作" width="240">
                    <template slot-scope="scope">
                      <el-button type="primary" plain v-if="permissions.ceping_djxxb_cepingdjxxb_edit && item.createDeptId === userInfo.deptId" @click="djmx_addHandle($event,scope.row.djId,scope.row.id,scope.$index)">编辑等次
                      </el-button>
                      <el-button type="danger" plain v-if="permissions.ceping_djxxb_cepingdjxxb_del && item.createDeptId === userInfo.deptId" @click="gzmx_deleteHandle(scope.row.id,scope.row.djId,scope.$index)">删除等次</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="avue-crud__pagination">
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background
                         layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>

      <!-- 评价等次信息 弹窗, 新增 / 修改     -->
      <djxxForm v-if="djxx_addOrUpdateVisible" ref="djxx_addOrUpdate" @refreshDataList="getDataList"></djxxForm>
      <!-- 评价等次明细 弹窗, 新增 / 修改 -->
      <djxxmxForm v-if="djmx_addOrUpdateVisible" ref="djmx_addOrUpdate" @getSubList="getSubList"></djxxmxForm>
      <!-- 评价等次明细新增 -->
      <djxxmx-aform v-if="djmx_addVisibale" ref="djmx_add" @getSubList="getSubList"></djxxmx-aform>
      <!-- 评价等次复用 -->
      <cepingdjxxbfy v-if="cepingdjxxbfy" ref="cepingdjxxbfy" @refreshDataList="getDataList"></cepingdjxxbfy>
    </basic-container>
  </div>
</template>

<script>
/**
 * 绩效考核_测评_评价等次管理列表
 * @author linh
 * @date 2021-06-18 13:52:44
 */
import {
  fetchList,
  delObj,
  postCoybDjmx,
  showOrDisplay
} from '@/api/ceping/cepingdjxxb'
import {
  querySubRuleByDjId,
  djmxdelObj,
  getDjmxByDjId
} from '@/api/ceping/cepingdjmxb'
import djxxForm from './cepingdjxxb-form'
import djxxmxForm from './cepingdjmxb-form'
import djxxmxAform from './cepingdjmxa-form'
import cepingdjxxbfy from './cepingdjxxbfy-form'
import {
  mapGetters, mapState
} from 'vuex'

export default {
  data() {
    return {
      dataForm: {
        djName: '',
        djZt: '1',
      },
      options: [{
        value: '1',
        label: '显示'
      }, {
        value: '0',
        label: '隐藏'
      }],
      dataList: [],
      activeName: '',
      mxUpdateOrAddIndex: '',
      mxUpdateOrAddPid: '',
      copyIdList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      djxx_addOrUpdateVisible: false,
      djmx_addOrUpdateVisible: false,
      djmx_addVisibale: false,
      djChecked: false,
      cepingdjxxbfy: false,
    }
  },
  components: {
    djxxForm,
    djxxmxForm,
    djxxmxAform,
    cepingdjxxbfy
  },
  created() {
    this.getDataList();
  },
  computed: {
    ...mapGetters(['permissions']),
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  methods: {
    //状态
    Zt(value) {
      return {
        yinCang: value === 0,
        green: value === 1,
      };
    },
    // 获取数据列表
    getDataList(page) {

      if (page) {
        this.pageIndex = page
      }

      this.activeName = '';

      this.dataListLoading = true
      fetchList(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      }, this.dataForm)).then(response => {
        this.dataList = response.data.data.records
        this.totalPage = response.data.data.total
      })
      this.dataListLoading = false
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 新增 / 修改
    djxx_addOrUpdateHandle(event, id) {
      event.stopPropagation(); //防止事件传播
      this.djxx_addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.djxx_addOrUpdate.init(id)
      })
    },
    // 删除
    djxx_deleteHandle(event, id) {
      event.stopPropagation();

      getDjmxByDjId(id).then(response => {
        if (response.data.data.length > 0) {
          this.$notify.closeAll();
          this.$notify.error('存在下一级无法删除');
        } else {
          this.$confirm('是否确认删除', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function () {
            return delObj(id)
          }).then(data => {
            this.$notify.closeAll();
            this.$notify.success('删除成功')
            this.getDataList()
          })
        }
      })

    },
    //  规则拷贝
    copyById(event, id, index) {

      if (event == true) {
        this.copyIdList[index] = id;
      } else if (event == false) {
        this.copyIdList.splice(index, 1);
      }
    },
    //复用
    copyRuleHandler(e, id) {
      e.stopPropagation();

      this.cepingdjxxbfy = true
      this.$nextTick(() => {
        this.$refs.cepingdjxxbfy.init(id)
      })
    },
    //显示或隐藏
    showOrDisplayHandler(event, ruleId, djzt) {
      var data = {
        ruleId: ruleId,
        djZt: djzt == 1 ? 0 : 1
      };

      event.stopPropagation();
      showOrDisplay(data)
        .then(() => {
          this.$notify.closeAll();
          this.$notify.success('修改成功');
          this.getDataList();
        })
        .catch(() => {
          this.$notify.closeAll();
          this.$notify.error("修改失败");
        });

    },
    //取得列表index索引
    getDjxxListIndex(pid) {
      let lPraIndex = 0;

      for (let i = 0; i < this.dataList.length; i++) {
        if (this.dataList[i].id === pid) {
          lPraIndex = i;
          break;
        }
      }
      return lPraIndex;
    },
    //等次明细新增
    djmx_addHandle(event, ruleId, id, index) {
      event.stopPropagation();
      var _this = this;

      if (id) { //修改
        _this.mxUpdateOrAddIndex = this.getDjxxListIndex(ruleId);
      } else { //'增加'
        _this.mxUpdateOrAddIndex = index;
      }

      _this.mxUpdateOrAddPid = ruleId;
      _this.djmx_addVisibale = true;

      _this.$nextTick(() => {
        _this.$refs.djmx_add.init(ruleId, id);
      });
    },
    //测评等次明细表  新增，修改
    djmx_addOrUpdateHandle(event, ruleId, id, index) {
      event.stopPropagation();
      var _this = this;

      if (id) { //修改
        _this.mxUpdateOrAddIndex = this.getDjxxListIndex(ruleId);
      } else { //'增加'
        _this.mxUpdateOrAddIndex = index;
      }

      _this.mxUpdateOrAddPid = ruleId;
      _this.djmx_addOrUpdateVisible = true;

      _this.$nextTick(() => {
        _this.$refs.djmx_addOrUpdate.init(ruleId, id);
      });
    },
    //等次明细删除
    gzmx_deleteHandle(id, pid, subIndex) {
      var _this = this;
      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        const praIndex = _this.getDjxxListIndex(pid);
        _this.dataList[praIndex].subList.splice(subIndex, 1);
        _this.$forceUpdate();
        return djmxdelObj(id);
      }).then(data => {
        this.$notify.closeAll();
        this.$notify.success('删除成功');
      });
    },
    //加载等次明细
    querySubRuleHandler(pid, index) {
      var _this = this;

      querySubRuleByDjId(pid).then(response => {
        _this.$set(_this.dataList[index], 'subList', response.data.data);
      }).catch(() => {
        this.$notify.closeAll();
        this.$notify.error("等次明细查询失败");
      });
    },
    //新增更新后回调函数
    getSubList() {
      var _this = this;

      querySubRuleByDjId(_this.mxUpdateOrAddPid).then(response => {
        _this.$set(_this.dataList[_this.mxUpdateOrAddIndex], 'subList', response.data.data);
      }).catch(() => {
        this.$notify.closeAll();
        this.$notify.error("规则分值查询失败");
      });
    }
  }
}

</script>
<style lang="scss" scoped>
.checkboxinner {
  width: 26px;
  height: 26px;
}

.el-checkbox__inner {
  width: 26px;
  height: 26px;
}

.el-checkbox__input {
  width: 26px;
  height: 26px;
}
</style>
